<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row>
				<el-col :span="6">
					<el-button type="primary" @click="addCate">添加分类</el-button>
				</el-col>
			</el-row>
			<tree-table class="treeTable" :show-index="true" index-text="#" border :show-row-hover="false" :expand-type="false"
				:selection-type="false" :data="cateList" :columns="columns">
				<!-- 是否有效 -->
				<template slot="isok" slot-scope="scope">
					<i class="el-icon-success" style="color: lightgreen;" v-if="scope.row.cat_deleted===false"></i>
					<i class="el-icon-error" v-else style="color: red;"></i>
				</template>
				<!-- 排序 -->
				<template slot="rights" slot-scope='scope'>
					<el-tag v-if="scope.row.cat_level===0">一级</el-tag>
					<el-tag type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
					<el-tag type="warning" v-else>三级</el-tag>
				</template>
				<template slot="operate">
					<el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
					<el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
				</template>
			</tree-table>
			<el-pagination
			      @size-change="PagesizeChange"
			      @current-change="CurrentChange"
			      :current-page="categories.pagenum"
			      :page-sizes="[1, 3, 5, 10, 30]"
			      :page-size="categories.pagesize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
		</el-card>
		<el-dialog
		  title="添加分类"
		  :visible.sync="dialogShow"
		  width="50%" @close="addCateDialogClose">
			<el-form :model="formList" :rules="addFormItem" ref="addFormRef" label-width="100px">
			  <el-form-item label="分类名称:" prop="cat_name">
			    <el-input v-model="formList.cat_name"></el-input>
			  </el-form-item>
				<el-form-item label="父级分类:">
				  <el-cascader
							clearable
				      v-model="selectKeys"
				      :options="ParentCateList"
							expand-trigger="hover"
							@change="ParentCateChange"
				      :props="cascaderCate" :change-on-select="true"></el-cascader>                                                                                                                                      
				</el-form-item>
			</el-form>
		  <span slot="footer">
		    <el-button @click="dialogShow = false">取 消</el-button>
		    <el-button type="primary" @click="dialogShowOk">确 定</el-button>
		  </span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				selectKeys:[],
				cascaderCate:{
					value:'cat_id',
					label:'cat_name',
					children:'children'
				},
				addFormItem:{
					cat_name:[
						{ required: true, message: '请输入分类名称', trigger: 'blur' }
					]
				},
				formList:{
					cat_pid:0,
					cat_name:'',
					cat_level:0
				},
				dialogShow:false,
				//商品分类数据列表
				cateList: [],
				//获取商品分类数据列表参数
				categories: {
					type: '',
					pagenum: 1,
					pagesize: 5
				},
				//总数据条数
				total: 0,
				columns: [{
					label: '分类名称',
					prop: 'cat_name'
				}, {
					label: '是否有效',
					type: 'template',
					template: 'isok'
				},{
					label: '排序',
					//表示当前列为一个模板列
					type: 'template',
					//表示当前这一列的模板名称
					template: 'rights'
				},{
					label: '操作',
					//表示当前列为一个模板列
					type: 'template',
					//表示当前这一列的模板名称
					template: 'operate'
				}],
				ParentCateList:[]
			}
		},
		created() {
			this.getCateList();
		},
		methods: {
			//确认发起添加请求
			dialogShowOk(){
				this.$refs.addFormRef.validate(async msg=>{
					if(!msg)return this.$message.errot('表单输入不正确！')
					const {data:res} = await this.$http.post(`categories`,this.formList)
					if(res.meta.status!==201)return this.$message.error(res.meta.msg)
					this.$message.success(res.meta.msg)
					this.getCateList()
					this.dialogShow = false
				})
			},
			//重置表单
			addCateDialogClose(){
				this.$refs.addFormRef.resetFields()
				this.selectKeys = []
				this.formList.cat_level=0
				this.formList.cat_pid=0
			},
			ParentCateChange(){
				if(this.selectKeys.length>0){
					this.formList.cat_pid = this.selectKeys[this.selectKeys.length-1]
					this.formList.cat_level = this.selectKeys.length
					return
				}
				this.formList.cat_pid = 0
				this.formList.cat_level = 0
			},
			//商品分类数据列表
			async getParentCateList(){
				const {data:res} = await this.$http.get('categories',{params:{type:2}})
				if(res.meta.status!==200){
					return this.$message.error('获取商品分类数据列表失败！')
				}
				this.ParentCateList = res.data
			},
			addCate(){
				this.getParentCateList()
				this.dialogShow=true
			},
			PagesizeChange(num){
				this.categories.pagesize = num;
				this.getCateList();
			},
			CurrentChange(current){
				console.log(current)
				this.categories.pagenum = current
				this.getCateList();
			},
			//获取商品分类数据列表
			async getCateList() {
				const {
					data: res
				} = await this.$http.get('categories', {
					params: this.categories
				})
				if (res.meta.status !== 200) {
					return this.$message.error('获取商品分类失败！')
				}
				this.cateList = res.data.result
				this.total = res.data.total
			}
		}
	}
</script>

<style scoped="scoped">
	.treeTable{
		margin-top: 20px;
	}

</style>
